// src/APP.vue

<template>
  <div>自定义指令示例</div>
  <div>
    <h2>1、v-copy指令演示</h2>
    <button v-copy:[success]="msg" >点击复制</button>
  </div>

  <div>
    <h2>2、v-real-img指令演示</h2>
    <img v-realimg="'../src/assets/logo.png'" src="./assets/errorLogo.png"/>
  </div>

  <div>
    <h2>3、v-lazyimg指令演示</h2>
    <i>此处使用方法仍有错误</i>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <img  src="../src/assets/lazyimg.png">
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
    <p>图片懒加载</p>
  </div>

  <div>
    <h2>4、v-emoji使用演示</h2>
    <input v-model="inputValue" v-emoji />
  </div>

  <div>
    <h2>5、v-longpress指令演示</h2>
    <button v-longpress:[1000]="longpress">按钮</button>
  </div>

  <div>
    <h2>6、v-input:type指令使用演示</h2>
    <input v-input:customize="inputValue1" data-rule="/[^\d]/" v-model="inputValue1" />
  </div>

  <div>
    <h2>7、v-draggable指令使用</h2>
    <div id="draggableBox" style="width: 500px;height:500px;border:1px solid red;margin: 100px 0 0 300px">
      <div v-draggable:draggableBox style="width:100px;height:100px;background:red;"></div>
    </div>
  </div>

  <div>
    <h2>8、v-permission指令使用</h2>
    <button v-permission="'user'">用户模块</button>
    <button v-permission="'order'">订单模块</button>
    <button v-permission="'goods'">商品模块</button>
  </div>

  <div>
    <h2>9、v-loading指令使用</h2>
    <div style="padding: 50px">
      <div v-loading="flag" loading-text="加载中..." style="width:100px;height:100px;border:1px solid red">橙某人</div>
      <button @click="flag = !flag">显示/隐藏</button>
    </div>
  </div>

  <div>
    <h2>10、v-clickoutside指令使用</h2>
    <button v-clickoutside="clickoutside">点击</button>
  </div>

</template>

<script lang="ts">
import { defineComponent,  ref } from 'vue'

export default defineComponent({
  name: 'APP',
  setup() {
    //1、v-copy指令演示
    let msg = ref('我是目标内容');

    //4、v-emoji指令演示
    let inputValue = ref('')

    //5、v-longpress指令演示
    const longpress = () => console.log('长按事件')

    //6、v-input:type指令演示
    const inputValue1 = ref('');

    //9、v-loading指令使用
    const flag = ref(false)

    return {
      //1、v-copy指令演示
      msg,
      success: (value) => {
        console.log(value)
      },

      //4、v-emoji指令演示
      inputValue,

      //5、v-longpress指令演示
      longpress,

      //6、v-input:type指令演示
      inputValue1,

      //9、v-loading指令使用
      flag,

      //10、v-clickoutside指令使用
      clickoutside(e) {
        console.log('非自身点击触发')
      }
    }
  }
})
</script>